<template>
  <div class="">
    <dl class="m-categroy">
      <dt>按拼音首字母选择：</dt>
      <dd
        v-for="item in list"
        :key="item"
      >
        <a :href="'#city-'+item">{{ item }}</a>
      </dd>
    </dl>
    <dl
      v-for="(item,idx) in block"
      :key="idx"
      :id="'city-'+item"
      class="m-categroy-section"
    >
      <dt>{{ item.title }}</dt>
      <dd>
        <span
          v-for="c in item.city"
          :key="c"
        >{{ c }}</span>
      </dd>
    </dl>
  </div>
</template>

<script>
import pinyin from 'js-pinyin'
export default {
  data() {
    return {
      list: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split(''),
      //使用eval()转化对象 数组时候一定要严格遵循字符串的格式
      block: []
      //block中应该设计的数据结构  {title:'A',city:[.....]},{} ...
    }
  },
  async mounted() {
    // 这里的思想非常值得学习
    // 1.使用接口获得全国所有城市
    // 2.导入js-pinyin库 获得每个城市的首字母
    // 3.根据chatcode获得每个字母的code 小写在97-122之间 为了将来排序用
    // 4.结合数据格式进行填充数据
    let self = this
    let block = [] //作为将来需要填充的
    let {
      status,
      data: { city }
    } = await self.$axios.get('/geo/city')
    let p
    let c
    let d = {}
    city.forEach(item => {
      p = pinyin
        .getFullChars(item.name)
        .toLowerCase()
        .slice(0, 1) //获取全国所有城市的首字母拼音
      c = p.charCodeAt(0) //获取每个城市首字母对应的charCode
      if (c > 96 && c < 123) {
        //a-z首字母在97指122 所以不在这个范围内的就出错了没必要执行
        if (!d[p]) {
          //如果当前d对象中还没有当前城市的首字母
          d[p] = []
        }
        d[p].push(item.name) //存在直接加入
      }
      //这样获得的d对象中就是  { a:"对应首字母A开头的城市",b:"对应首字母B开头的城市"．．． }　顺序打乱的
      //接下来要将d对象转化为数组放在block中
    })
    for (let [k, v] of Object.entries(d)) {
      //Object.entries对象变数组，数组中每一项为对应每一个对象的键值对
      block.push({
        title: k,
        city: v
      })
    }
    //这样就得到了block格式为 [ {title : "a",city:[....]} ] 但是还没有排序 接下里用数组的sort配合charcode进行排序
    self.block = block.sort((a, b) => {
      return a.title.charCodeAt(0) - b.title.charCodeAt(0)
    })
  }
}
</script>

<style lang="scss">
@import '@/assets/css/changeCity/categroy.scss';
</style>